<script setup lang="ts">
import { useSettingStore } from '@/stores'
const settingStore = useSettingStore()

// 改变聊天界面开关状态
const handelSendMsg = () => {
  settingStore.changeSendMsgStatus()
}
</script>
<template>
  <div class="comment_tab">
    <div class="comment_tab_left">
      <el-icon><ChatDotSquare /></el-icon>
      <span>聊天</span>
    </div>
    <div class="comment_tab_right">
      <span @click="handelSendMsg"
        ><el-icon><CloseBold /></el-icon
      ></span>
    </div>
  </div>
</template>

<style scoped lang="less">
@import '../../../../assets/less/index.less';
.comment_tab {
  height: 5%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f6f8fb;
  .comment_tab_left {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding-left: 15px;
    height: 100%;
    width: 40%;
    border-right: @border-grey;
    span {
      margin-left: 5px;
    }
  }
  .comment_tab_right {
    padding-right: 20px;
    flex: 1;
    height: 100%;
    cursor: pointer;
    border-bottom: @border-grey;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
